<template>
  <div>
    <div style="height:58px;line-height:58px;">
      生日：
      <el-date-picker
        v-model="selDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期" size="mini">
      </el-date-picker>
      时间：
      <el-time-picker
        v-model="selTime"
        value-format="HH:mm:ss"
        placeholder="任意时间点" size="mini">
      </el-time-picker>
      <el-button type="primary" @click="handleSearch" size="mini">计算</el-button>
    </div>
    <div v-if="baziData" style="height:58px;line-height:58px;border-bottom:1px solid #409EFF;border-top:2px solid #409EFF;">您的八字：{{baziData.bazi.nian}}年，{{baziData.bazi.yue}}月，{{baziData.bazi.ri}}日，{{baziData.bazi.shi}}时</div>
    <div v-if="baziData" style="height:58px;line-height:58px;border-bottom:1px solid #409EFF;">八字结构：{{baziData.baziText}}</div>
    <div v-if="baziData" style="height:58px;line-height:58px;border-bottom:1px solid #409EFF;">
      五行权重：
      <span style="padding:0 20px;" v-for="(val,key) in baziData.weights">{{key}} ：{{val}}</span>
    </div>
    <div v-if="baziData" style="height:58px;line-height:58px;border-bottom:1px solid #409EFF;">
      五行百分比：
      <span style="padding:0 20px;" v-for="(val,key) in baziData.pWeights">{{key}} ：{{val}}</span>
    </div>
    <div v-if="baziData" style="height:58px;line-height:58px;border-bottom:1px solid #409EFF;">
        命的五行：[ {{baziData.mWX}} ] &nbsp;&nbsp;|&nbsp;&nbsp; 命的值：[ {{baziData.mValue}} ]
    </div>
    <div v-if="baziData" style="height:58px;line-height:58px;border-bottom:1px solid #409EFF;">
      用神 ： {{baziData.ys}}
    </div>
    <div v-if="baziData" style="line-height:58px;">
      <el-table :data="baziData.blMatches">
        <el-table-column prop="mainExpression" label="主条件"></el-table-column>
        <el-table-column label="子条件">
          <template slot-scope="scope">
            <div v-for="(sub,index) in scope.row.subExpressions" :key="index">{{sub}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="position" label="脏腑"></el-table-column>
        <el-table-column prop="blValue" label="病理值"></el-table-column>
        <el-table-column prop="mark" label="病理表现"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    name: "bazi-index",
    data(){
      return {
        selDate:null,
        selTime:null,
        baziData:null
      }
    },
    methods:{
      ...mapActions({fetch:'fetch'}),
      handleSearch(e){
        console.log(this.selDate)
        console.log(this.selTime)
        this.fetch({
          name:"computeBazi",
          data:{birthday:this.selDate+' '+this.selTime}
        }).then(res=>{
          console.log(res)
          this.baziData = res
        }).catch(err=>{
          console.log(err)
          this.$message.error(err)
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
